<template>
<div>
  <div>
    <el-button size="small" icon="el-icon-plus" type="primary" @click="showSal">添加工资账套</el-button>
    <el-button size="small" type="success" icon="el-icon-refresh-right"></el-button>
  </div>
  <div>
    <el-table
        :data="salSobs"
        style="width: 100%;margin-top: 20px"
        size="small">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed="left"
          prop="name"
          label="账套名称"
          width="110">
      </el-table-column>
        <el-table-column
            prop="basicSalary"
            label="基本工资"
            width="100">
        </el-table-column>
          <el-table-column
              prop="trafficSalary"
              label="交通补助"
              width="100">
          </el-table-column>
          <el-table-column
              prop="lunchSalary"
              label="午餐补助"
              width="100">
          </el-table-column>
          <el-table-column
              prop="bonus"
              label="奖金"
              width="70">
          </el-table-column>
          <el-table-column
              prop="createDate"
              label="启用时间"
              width="100">
          </el-table-column>
      <el-table-column
          label="养老金"
          width="200">
        <el-table-column
            prop="pensionBase"
            label="基数"
            width="60">
        </el-table-column>
        <el-table-column
            prop="pensionPer"
            label="比率"
            width="60">
        </el-table-column>
      </el-table-column>
      <el-table-column
          label="医疗保险"
          width="200">
        <el-table-column
            prop="medicalBase"
            label="基数"
            width="60">
        </el-table-column>
        <el-table-column
            prop="medicalPer"
            label="比率"
            width="60">
        </el-table-column>
      </el-table-column>
      <el-table-column
          label="公积金"
          width="200">
        <el-table-column
            prop="accumulationFundBase"
            label="基数"
            width="60">
        </el-table-column>
        <el-table-column
            prop="accumulationFundPer"
            label="比率"
            width="60">
        </el-table-column>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150px">
        <template slot-scope="scope">
        <el-button size="mini" type="primary" @click="showEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="deleteSal(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
      :title="editName"
      :visible.sync="dialogVisible"
      width="50%">
    <div style="display: flex;justify-content: space-around;align-items: center">
      <el-steps direction="vertical" :active="activeIndex">
        <el-step :title="item" v-for="(item,index) in salName" :key="index"/>
      </el-steps>
      <el-input v-for="(value,title,index) in salary"
                            ref="salRef"
                            v-model="salary[title]"
                            :key="index"
                            :placeholder="'请输入' +salName[index]+ '...' "
                            style="width: 200px"
                            v-show="activeIndex === index"></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">{{activeIndex===this.salName.length-1?'取消':'上一步'}}</el-button>
    <el-button type="primary" @click="determine">{{activeIndex ===this.salName.length-1?'完成':'下一步'}}</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "SalSob",
  data(){
  return{
    editName:'',
    salary:{
      name:'',
      basicSalary:0,
      trafficSalary:0,
      lunchSalary:0,
      bonus:0,
      pensionBase:0,
      pensionPer:0,
      medicalBase:0,
      medicalPer:0,
      accumulationFundBase:0,
      accumulationFundPer:0,
    },
    activeIndex:0,
    salName:['账套名称','基本工资','交通补助','午餐补助','奖金','养老金基数','养老金比率','医疗保险基数','医疗保险比率','公积金基数','公积金比率'],
    dialogVisible:false,
    salSobs:[]
  }
  },
  methods:{
    showEdit(row) {//显示编辑弹框
      this.dialogVisible = true
      this.editName = '编辑工资账套'
      this.activeIndex = 0
      this.salary.id = row.id
      this.salary.name = row.name
      this.salary.basicSalary = row.basicSalary
      this.salary.trafficSalary = row.trafficSalary
      this.salary.lunchSalary = row.lunchSalary
      this.salary.bonus = row.bonus
      this.salary.pensionBase = row.pensionBase
      this.salary.pensionPer = row.pensionPer
      this.salary.medicalBase = row.medicalBase
      this.salary.medicalPer = row.medicalPer
      this.salary.accumulationFundBase = row.accumulationFundBase
      this.salary.accumulationFundPer = row.accumulationFundPer
    },
    deleteSal(row){//删除
      this.$confirm('此操作将永久删除'+row.name +', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/salary/sob/delete/'+row.id).then(res=>{
          if(res){
            this.initSal()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    cancel(){//取消
      if (this.activeIndex ===0){
        return
      }else if(this.activeIndex===this.salName.length-1){
        this.dialogVisible = false
      }
        this.activeIndex--
    },
    determine(){//确定
        if (this.activeIndex === this.salName.length - 1) {
          if(this.salary.id){
            this.putRequest('/salary/sob/update',this.salary).then(res=>{
              if (res){
                this.initSal()
                this.dialogVisible = false
              }
            })
          }else {
          this.postRequest('/salary/sob/add', this.salary).then(res => {
            if (res) {
              this.initSal()
              this.dialogVisible = false
            }
          })
        }
      }
      this.activeIndex++
    },
    showSal(){//显示添加弹框
      this.editName = '添加工资账套'
      this.activeIndex = 0
      this.dialogVisible = true
      this.salary={
        name:'',
            basicSalary:0,
            trafficSalary:0,
            lunchSalary:0,
            bonus:0,
            pensionBase:0,
            pensionPer:0,
            medicalBase:0,
            medicalPer:0,
            accumulationFundBase:0,
            accumulationFundPer:0,
      }
    },
    initSal(){ //获取所有工资账套
    this.getRequest('/salary/sob/get-All').then(res=>{
      if (res){
        this.salSobs = res
      }
    })
  }
    },
  mounted() {
  this.initSal()
  }
}
</script>

<style scoped></style>